<nz-card [nzBordered]="false">
    <form nz-form [nzLayout]="'vertical'" class="search__form">
        <nz-form-item nz-row>
            <nz-form-label>
                {{'TenantNameOrTenancyCode' | localize}}
            </nz-form-label>
            <nz-form-control>
                <nz-input-group nzSearch [nzAddOnAfter]="suffixButton">
                    <input type="text" nz-input [(ngModel)]="filters.filterText" name="filterText"
                        placeholder="{{'SearchWithThreeDot' | localize}}">
                    <ng-template #suffixButton>
                        <button nz-button nzType="primary" nzSearch (click)="refresh()">
                            <i nz-icon type="search"></i>
                        </button>
                    </ng-template>
                </nz-input-group>
            </nz-form-control>
        </nz-form-item>
        <nz-row nzGutter="24" *ngIf="advancedFiltersVisible">
            <nz-col nzSm="8">
                <nz-form-item>
                    <nz-form-label>
                        {{'Edition' | localize}}
                    </nz-form-label>
                    <nz-form-control>
                        <edition-combo [(selectedEdition)]="filters.selectedEditionId" (selectedEditionChange)="refresh()"></edition-combo>
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
            <nz-col nzSm="8">
                <nz-form-item>
                    <nz-form-control>
                        <label nz-checkbox [(ngModel)]="filters.subscriptionEndDateRangeActive" name="SubscriptionEndDateRangeActive">
                            {{'SubscriptionEndDate' | localize}}
                        </label>
                    </nz-form-control>
                    <nz-form-control>
                        <nz-range-picker name="SubscriptionEndDateRange" [(ngModel)]="subscriptionDateRange"
                            [nzDisabled]="!filters.subscriptionEndDateRangeActive" (ngModelChange)="refresh()"></nz-range-picker>
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
            <nz-col nzSm="8">
                <nz-form-item>
                    <nz-form-control>
                        <label nz-checkbox [(ngModel)]="filters.creationDateRangeActive" name="CreationDateRangeActive">
                            {{'CreationTime' | localize}}
                        </label>
                    </nz-form-control>
                    <nz-form-control>
                        <nz-range-picker name="CreationDateRange" [(ngModel)]="creationDateRange"
                            [nzDisabled]="!filters.creationDateRangeActive" (ngModelChange)="refresh()"></nz-range-picker>
                    </nz-form-control>
                </nz-form-item>
            </nz-col>
        </nz-row>
    </form>
    <nz-row nzGutter="8">
        <nz-col nzMd="20" nzSm="12">
            <button nz-button [nzType]="'primary'" *ngIf="isGranted('Pages.Tenants.Create')" (click)="create()">
                <i nz-icon type="plus"></i>
                <span>
                    {{"CreateNewTenant" | localize}}
                </span>
            </button>
            <button nz-button [nzType]="'danger'" *ngIf="isGranted('Pages.Tenants.Delete')&&selectedDataItems.length>0"
                (click)="batchDelete()">
                <i nz-icon type="delete"></i>
                <span>
                    删除所选
                </span>
            </button>
        </nz-col>
        <nz-col nzMd="4" nzSm="12" class="text-right">
            <a (click)="advancedFiltersVisible=!advancedFiltersVisible">
                {{(advancedFiltersVisible ? 'HideAdvancedFilters' : 'ShowAdvancedFilters') | localize}}
                <i class="anticon" [class.anticon-down]="!advancedFiltersVisible" [class.anticon-up]="advancedFiltersVisible"></i>
            </a>
        </nz-col>
    </nz-row>
    <div class="my-md">
        <nz-alert [nzType]="'info'" [nzShowIcon]="true" [nzMessage]="message">
            <ng-template #message>
                <span>
                    已选择<strong class="text-primary">{{selectedDataItems.length}}</strong> 项
                </span>
                <a (click)="restCheckStatus(dataList)" *ngIf="selectedDataItems.length>0" class="ml-md">
                    {{'Clear' | localize}}
                </a>
                <nz-divider nzType="vertical"></nz-divider>
                <a (click)="refresh()">
                    {{'Refresh' | localize}}
                </a>
            </ng-template>
        </nz-alert>
    </div>
    <nz-row class="my-md">
        <nz-table #nzDataTable [nzFrontPagination]="false" [nzShowQuickJumper]="true" [nzShowSizeChanger]="true"
            [nzData]="dataList" [nzTotal]="totalItems" [nzLoading]="isTableLoading" [(nzPageIndex)]="pageNumber"
            [(nzPageSize)]="pageSize" (nzPageIndexChange)="refresh()" (nzPageSizeChange)="refresh()" [nzNoResult]="noDataTemplate"
            [nzShowTotal]="totalTemplate" [nzScroll]="{x: totalItems>0?'1200px':'auto'}">
            <ng-template #noDataTemplate>
                <no-data></no-data>
            </ng-template>
            <ng-template #totalTemplate let-total>
                {{'TotalRecordsCount' | localize:total}}
            </ng-template>
            <thead (nzSortChange)="gridSort($event)">
                <tr>
                    <th nzShowCheckbox [(nzChecked)]="allChecked" [nzDisabled]="allCheckboxDisabled" [nzIndeterminate]="checkboxIndeterminate"
                        (nzCheckedChange)="checkAll($event)"></th>

                    <th nzShowSort nzSortKey="tenancyName">
                        {{'TenancyCodeName' | localize}}
                    </th>
                    <th nzShowSort nzSortKey="name">
                        {{'Name' | localize}}
                    </th>
                    <th nzShowSort nzSortKey="editionDisplayName">
                        {{'Edition' | localize}}
                    </th>
                    <th nzShowSort nzSortKey="subscriptionEndDateUtc" class="text-center">
                        {{'SubscriptionEndDateUtc' | localize}}
                    </th>
                    <th nzShowSort nzSortKey="isActive" class="text-center">
                        {{'Active' | localize}}
                    </th>
                    <th nzShowSort nzSortKey="creationTime" class="text-center">
                        {{'CreationTime' | localize}}
                    </th>
                    <th nzWidth="240px" nzRight="0px" class="text-center">
                        {{'Actions' | localize}}
                    </th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let item of nzDataTable.data">
                    <td nzShowCheckbox [(nzChecked)]="item.checked" (nzCheckedChange)="refreshCheckStatus($event)"></td>

                    <td>
                        <span *ngIf="item.connectionString" nz-tooltip [nzTitle]="l('HasOwnDatabase')">
                            <i nz-icon type="database"></i>
                        </span>
                        {{item.tenancyName}}
                    </td>
                    <td>
                        {{item.name}}
                    </td>
                    <td>
                        {{item.editionDisplayName}}
                    </td>
                    <td class="text-center">
                        {{item.subscriptionEndDateUtc?(item.subscriptionEndDateUtc | momentFormat:'L'):'-'}}
                    </td>
                    <td class="text-center">
                        <span class="badge badge-success" *ngIf="item.isActive">{{'Yes' | localize}}</span>
                        <span class="badge badge-error" *ngIf="!item.isActive">{{'No' | localize}}</span>
                    </td>
                    <td class="text-center">
                        {{item.creationTime | momentFormat:'L'}}
                    </td>
                    <td class="text-center" nzRight="0px">
                        <ng-container *ngIf="isGranted('Pages.Tenants.Edit')">
                            <a (click)="editTenant(item)">
                                <i nz-icon type="edit"></i>
                                {{'Edit' | localize}}
                            </a>
                            <nz-divider nzType="vertical"></nz-divider>
                        </ng-container>
                        <ng-container *ngIf="isGranted('Pages.Tenants.Delete')">
                            <nz-popconfirm [nzTitle]="'TenantDeleteWarningMessage'| localize:item.name" (nzOnConfirm)="delete(item)"
                                [nzOkText]="l('Ok')" [nzCancelText]="l('Cancel')">
                                <a nz-popconfirm>
                                    <i nz-icon type="delete"></i>
                                    {{'Delete' | localize}}
                                </a>
                            </nz-popconfirm>
                            <nz-divider nzType="vertical"></nz-divider>
                        </ng-container>
                        <ng-container>
                            <nz-dropdown [nzPlacement]="'bottomRight'">
                                <a nz-dropdown>
                                    {{'More' | localize}}
                                    <i nz-icon type="down"></i>
                                </a>
                                <ul nz-menu>
                                    <li nz-menu-item [nzDisabled]="!item.isActive" *ngIf="isGranted('Pages.Tenants.Impersonation')"
                                        (click)="item.isActive && showTenantImpersonateModal(item)">
                                        <i nz-icon type="login"></i>
                                        {{'LoginAsThisTenant' | localize}}
                                    </li>
                                    <li nz-menu-item *ngIf="isGranted('Pages.Tenants.ChangeFeatures')" (click)="changeFeatures(item)">
                                        <i nz-icon type="codepen"></i>
                                        {{'Features' | localize}}
                                    </li>
                                    <li nz-menu-item (click)="unlockUser(item)">
                                        <i nz-icon type="unlock"></i>
                                        {{'Unlock' | localize}}
                                    </li>
                                </ul>
                            </nz-dropdown>
                        </ng-container>
                    </td>
                </tr>
            </tbody>
        </nz-table>
    </nz-row>

</nz-card>
